<template>
    <div>
        <ve-histogram :data="total"></ve-histogram>
    </div>
</template>

<script>
    export default {
        props: ['id'],
        data() {
            return {
                answers: [],
                item: [],
                vdata: {
                    columns: ['x', 'y'],
                    rows: [{
                            'x': '优秀',
                            'y': 3,
                        },
                        {
                            'x': '良好',
                            'y': 4,
                        },
                    ]
                }
            }
        },
        computed: {
            total() {
                let rows = [];
                let res = {};
                let map = {};
                this.item.forEach(el => {
                    res[el.id] = 0;
                    map[el.item_name] = el.id;
                    rows.push({
                        x:el.item_name,
                        y:''
                    })
                });
                this.answers.forEach(el =>{
                    el.content.forEach(sel =>[
                        res[sel.answer]++
                    ])
                })
                rows.forEach(r =>{
                    r.y = res[map[r.x]]
                })
                    return {
                        columns: ['x', 'y'],
                        rows
                    }
            }
        },
        created() {
            this.getPaper();
        },
        methods: {
            async getPaper() {
                const ret = await this.axios.get(`/papers/answer/${this.id}`);
                this.item = JSON.parse(ret.data.data.item);
                this.answers = ret.data.data.answers;
            }
        }
    }
</script>

<style>

</style>
